<template>
  <div id="rptVSBarCode">
    <Breadcrumb content="报告单元和分管类别对照" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="基础字典">
          <Splitpanes class="area">
            <!-- 左侧报告单元列表 -->
            <Pane :size="(600 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input
                    v-model="searchForm.rptSearchValue"
                    type="search"
                    clearable
                    class="vxeInputSearch"
                    placeholder="关键字查询"
                    @clear="getRptGroupList"
                    @keyup="getRptGroupList"
                    @search-click="getRptGroupList()"
                  ></vxe-input>
                  <vxe-button
                    type="text"
                    class="button-blue"
                    icon="vxe-icon-refresh"
                    content="刷新"
                    :loading="showLoading"
                    @click="getRptGroupList"
                  ></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table
                  ref="labRptTable"
                  border
                  class="mytable-scrollbar"
                  show-header-overflow
                  show-overflow
                  align="center"
                  :row-config="{ isCurrent: true, isHover: true }"
                  @current-change="rptRowClick"
                  :data="rptList"
                  :loading="showLoading"
                >
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="rptGroup" title="报告单元编号"></vxe-column>
                  <vxe-column field="rptGroupName" title="报告单元名称"></vxe-column>
                  <vxe-column field="businessType" title="业务类型"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 中间对照信息 -->
            <Pane :size="((conWidth - 1000) / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-button
                    type="text"
                    class="button-blue"
                    icon="vxe-icon-refresh"
                    content="刷新"
                    :loading="showLoading"
                    @click="getRptGroupList"
                  ></vxe-button>

                  <div class="msgDiv">双击项目移除对应关系</div>
                </template>
              </vxe-toolbar>

              <div class="leftTable">
                <vxe-table
                  ref="rptVsBarCodeTable"
                  border
                  class="mytable-scrollbar"
                  show-header-overflow
                  show-overflow
                  align="center"
                  :row-config="{ isCurrent: true, isHover: true }"
                  :data="rptBanFeeItemList"
                  :loading="showLoading"
                  @cell-dblclick="deleteRptVsBarCode"
                >
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="60" align="left"></vxe-column>
                  <vxe-column field="feeName" title="项目名称" min-width="120" align="left"></vxe-column>
                  <vxe-column field="shortName" title="项目简称" width="65"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <!-- 右侧信息 -->
            <Pane :size="(500 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="FeeItemSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getFeeItemList" @keyup="getFeeItemList" @search-click="getFeeItemList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getFeeItemList"></vxe-button>
                  <div class="msgDiv">双击项目添加对应关系</div>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" show-header-overflow show-overflow align="left" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="feeItemrowClick" :data="FeeItemList" :loading="showLoading">
                  <vxe-column type="seq" title="序号" width="30"></vxe-column>
                  <vxe-column field="feeCode" title="项目编号" width="60" align="left"></vxe-column>
                  <vxe-column field="feeName" title="项目名称" min-width="120" align="left"></vxe-column>
                  <vxe-column field="shortName" title="项目简称" width="65"></vxe-column>
                  <vxe-column field="price" title="单价" align="right" width="60"></vxe-column>
                </vxe-table>
              </div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/lis/rptBan/feeitem"></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示信息
import LogInfo from '@/components/LogInfo.vue'; //操作日志
import { AppStore } from '@/stores/store';
let store = AppStore();
// 全局变量定义区 ==========
// 变量定义区
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);
const barCodeList = reactive([]);
let selevctBarCodeRow :any = reactive({
  id: ''
});
let rptList = reactive([]);
let FeeItemList = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let searchValue = ref('');
let FeeItemSearchValue = ref('');

const searchForm = reactive({
  orgId: store.userInfo.orgId,
  rptSearchValue: '',
  name: store.userInfo.orgName
});

const rptBanFeeItemList = reactive([]);
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 方法定义区 =============
onMounted(() => {
  getRptGroupList();
  getFeeItemList();
});

// 获取报告单元列表
function getRptGroupList() {
  rptList.length = 0;
  showLoading.value = true;
  const url = '/api/rptGroup/getRptGroupList';
  let obj = {
    keyWords: searchForm.rptSearchValue,
    orgId: searchForm.orgId
  };
  proxy.$http
    .post(url, obj)
    .then((res: any) => {
      rptList.push(...res.data);
      if (rptList.length > 0) {
        rptRowClick({ row: rptList[0] });
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 点击当前行// 行点击事件
function rptRowClick({ row }: any) {
  (proxy.$refs.labRptTable as any).setCurrentRow(row);
  selevctBarCodeRow = row;
  findBanFeeItemList(row.rptGroup);
}

// 获取中间的报告单元信息
function findBanFeeItemList(rptGroup: string) {
  rptBanFeeItemList.length = 0;
  const url = '/lis/rptBan/feeitem/findBanFeeListByRptGroup/' + rptGroup;
  proxy.$http
    .get(url)
    .then((res: any) => {
      rptBanFeeItemList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

// 删除数据
function deleteRptVsBarCode({ row }: any) {
  const url = '/lis/rptBan/feeitem/deleteBanFeeItem';
  proxy.$http
    .post(url, {
      id: row.rptBanFeeItemId
    })
    .then((res: any) => {
      findBanFeeItemList(selevctBarCodeRow.rptGroup);
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 获取申请项目列表
function getFeeItemList() {
  FeeItemList.length = 0;
  showLoading.value = true;
  const url = '/lis/fee/item/findFeeItemList';
  let obj = {
    keyWords: FeeItemSearchValue.value
  };
  proxy.$http
      .get(url, { params: obj })
      .then((res: any) => {
        FeeItemList.length = 0;
        Object.assign(FeeItemList, res.data);
        //FeeItemList.push(...res.data);
        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}

function feeItemrowClick({ row }: any) {
  const url = '/lis/rptBan/feeitem/addBanFeeeItem';
  let addFeeItemVsBarCode = {
    feeCode: row.feeCode,
    rptGroup: selevctBarCodeRow.rptGroup,
  };
  proxy.$http
      .post(url, addFeeItemVsBarCode)
      .then((res: any) => {
        VxeMessage('挪动成功', VxeNotifyType.success);
        findBanFeeItemList(selevctBarCodeRow.rptGroup);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
</script>
<style lang="scss" scoped>
#rptVSBarCode {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    :deep(.el-tabs) {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 39px);
        padding: 0;
        .el-tab-pane {
          height: 100%;
        }
      }
    }
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .leftTable {
        height: calc(100% - 39px);
        :deep(.vxe-table--render-wrapper) {
          height: 100%;
          .vxe-table--main-wrapper {
            height: 100%;
            .vxe-table--body-wrapper {
              height: calc(100% - 26px) !important;
            }
          }
        }
        :deep(.vxe-table--render-default) {
          height: calc(100% - 36px) !important;
        }
      }

      // 右侧基本信息表单
      .baseForm {
        .el-row {
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
        .form-footer {
          :deep(.el-form-item__content) {
            margin-left: 120px !important;
          }
        }
        .el-form-item--large {
          margin-bottom: 10px;
        }
        .el-radio {
          margin-right: 20px;
        }
      }
      .msgDiv {
        margin-left: 5px;
        color: rgb(180, 28, 28);
      }
    }
  }
}
</style>
